$pink: pink;

header {
  padding: 2rem 1rem;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;

  h1 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 1rem;
  }

  #new-task-form {
    display: flex;

    input {
      border: none;
      outline: none;
      background: none;
    }
    #new-task-input {
      flex: 1 1 0%;
      background-color: #ffd803;
      padding: 1rem;
      border-radius: 1rem;
      margin-right: 1rem;
      color: #272343;
      font-size: 1.25rem;

      &::placeholder {
        color: #716f7e;
        opacity: 0.3;
      }
    }

    #new-task-submit {
      border-radius: 1rem;
      padding: 0 10px;
      color: black;
      font-weight: 700;
      background-image: linear-gradient(to right, #ffb803, #ffd803);
      cursor: pointer;
      transition: 0.4s;

      &:hover {
        opacity: 0.8;
      }

      &:active {
        opacity: 0.6;
      }
    }
  }
}
